<!--1、安装vue：npm install -g @vue/cli@3.0.4-->
<!--创建vue项目：vue create hello-world-->
<!--进入项目目录：cd hello-world-->
 <!--运行项目： npm run serve-->

<!--2、修改代码：-->
<!--找到src->components目录，新建vue文件，可以编辑页面元素-->
<!--打开App.vue，引入新加入对vue文件及挂载-->

<!--3、在首页新增页面入口：-->
<!--在项目目录下cd hello-world执行命令：vue add router-->
<!--找到router.js增加新入口代码-->

<!--{-->
      <!--path: '/One',-->
      <!--name: 'One',-->
      <!--// route level code-splitting-->
      <!--// this generates a separate chunk (about.[hash].js) for this route-->
      <!--// which is lazy-loaded when the route is visited.-->
      <!--component: () => import(/* webpackChunkName: "about" */ './components/one.vue')-->
    <!--}-->

<!--app.vue里面的代码会自动更新，再增加新入口代码-->
<!--<router-link to="/One">One</router-link>-->

<!DOCTYPE html>
<html>
  <head>
    <title>vue实现axios</title>
      <link rel="stylesheet" href="../js/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
        <input type="button" value="click me" @click="getUserInfo">
    <div v-if ="user_info">
        <p >{{user_info}}</p>
       <input type="text"  v-model="user_info.age" >
    <input type="text"  v-model="user_info.user" >
    <input type="button" value="update"  @click="update" >
    </div>

    </div>

    <script>
    axios.defaults.baseURL="http://127.0.0.1:5000/";
    const vm = new Vue({
      el: '#app',
        data(){
          return{
              user_info:null
          }
        },
        methods:{
            update(){
                console.log(this.user_info);
                axios({
                    url: "/user/data",
                     method: "post",
                    data:this.user_info
                })

            },
            getUserInfo(){
                if(this.user_info!==null){
                    this.user_info=null
                }else{
                    axios({
                    url: "/user/data",
                     method: "post",
                        data:{
                        name:'wangxxx'
                        }
                }).then(response=>{
                    console.log("response:",response)
                        console.log("response.data:",response.data)
                        this.user_info=response.data.data
                    })
            }
        }
        }

    })
    </script>
  </body>
</html>